<!--
 * @author: sanbao
 * @Date: 2022-08-05 16:49:59
-->
<style lang='scss' scoped>
.login {
  overflow: hidden;
  .login_img {
    position: fixed;
    min-width: 100%;
    min-height: 100%;
    top: 0;
    left: 0;
    z-index: -1;
  }
  .login_form {
    width: 300px;
    margin: 300px auto;
    background-color: rgba(0, 0, 0, 0.152);
    padding: 20px;
    border-radius: 5px;
    h2 {
      font-weight: 400;
      text-align: center;
      margin-bottom: 20px;
      color: #fff;
    }
    .el-button {
      width: 100%;
    }
  }
}
</style>

<template>
  <div class="login">
    <!-- <img class="login_img" src="../../assets/images/login_bg.jpeg" alt="" /> -->
    <video
      class="login_img"
      src="../../assets/9773714ad8bd4e032be8ae1bd4cee3d4.mp4"
      autoplay
      muted="false"
    ></video>
    <div class="login_form">
      <h2>那就叫诺手后台管理系统吧</h2>
      <el-form
        ref="ruleFormRef"
        :model="ruleForm"
        :rules="rules"
        size="default"
      >
        <el-form-item prop="username">
          <el-input v-model.trim="ruleForm.username" placeholder="请输入用户" />
        </el-form-item>
        <el-form-item prop="password">
          <el-input
            type="password"
            v-model.trim="ruleForm.password"
            placeholder="请输入密码"
          />
        </el-form-item>
      </el-form>
      <el-button type="primary" @click="handelloginbutton">登陆</el-button>
    </div>
  </div>
</template>

<script lang='ts'>
import { defineComponent, ref, reactive, toRefs, computed } from "vue";
import type { FormInstance, FormRules } from "element-plus";
import { FormData } from "../../type/login";
import { useStore } from "vuex";
import { ElNotification } from "element-plus";
import { useRouter } from "vue-router";
import md5 from "md5";
export default defineComponent({
  components: {},
  setup() {
    const store = useStore();
    const router = useRouter();
    const ruleFormRef = ref<FormInstance>();
    const data = reactive(new FormData());
    const rules = reactive<FormRules>({
      username: [
        {
          required: true,
          message: "请输入用户名",
          trigger: "blur",
        },
        { min: 6, max: 18, message: "用户名在3～5之间", trigger: "blur" },
      ],
      password: [
        {
          required: true,
          message: "请输入密码",
          trigger: "blur",
        },
        { min: 6, max: 16, message: "密码在6～16之间", trigger: "blur" },
      ],
    });
    const handelloginbutton = async () => {
      let obj = {
        username: data.ruleForm.username,
        password: md5(data.ruleForm.password),
      };
      const response = await store.dispatch("handelloginbutton", obj);
      if (response.data.success == true) {
        ElNotification.success(response.data.message);
        router.push("/");
      } else {
        ElNotification.error(response.data.message);
      }
    };
    return {
      ...toRefs(data),
      rules,
      handelloginbutton,
    };
  },
});
</script>
